<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <style>
    .warn{
        display: none;
        color:red;
    }
    </style>
</head>
<body>
    <div id="app">
       <fieldset>
           <legend>
               商品详情
           </legend>
           <p>
               <label for="id">编号：</label>
               <input type="text" name="id" id="id" v-model="prod.id"/>
           </p>
           <p>
            <label for="name">名称：</label>
            <input type="text" name="name" id="name" v-model="prod.name"/>
            <span v-bind:class="{warn:!isValid}">商品名称不能为空!</span>
        </p>
        <p>
            <label for="price">价格：</label>
            <input type="number" name="price" id="price" v-model="prod.price"/>
        </p>
        <p>
            <input type="button" value="保存" @click="doSave">
        </p>
       </fieldset>
       <input type="text" placeholder="请输入查询关键字" v-model="searchKey">
       <table class="table">
           <thead>
               <tr>
                   <th>编号</th>
                   <th>名称</th>
                   <th>价格</th>
                   <th>操作</th>
               </tr>
           </thead>
           <tbody>
               <tr v-for="(item,index) in searchProdList">
                   <td>{{item.id}}</td>
                   <td>{{item.name}}</td>
                   <td>&yen;{{item.price| priceFormat}}</td>
                   <td class="text-center"><button @click="doRemove(index)">删除</button></td>
               </tr>
           </tbody>
       </table>
    </div>
    <script src="js/vue.min.js"></script>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                isValid:true,
                searchKey:[],
                prod:{id:0,name:'',price:0},
                prodList:[
                { id:0,name:'iPhone X',price:5888 },
                    { id:1,name:'华为P30',price:5888 },
                    { id:2,name:'小米10',price:5888 }
                ]
            },
            computed:{
                searchProdList:function(){
                    var self=this;
                    return this.prodList.filter(function(item){
                       return item.name.indexOf(self.searchKey)!=-1;
                    })
                }
            },
            watch:{//侦听
                       prod:function(newVal,oldVal){
                           if(newVal.name==""){
                               this.isValid=false;
                           }else{
                               this.isValid=true;
                           }
                           console.log("新的：",newVal);
                           console.log("旧的:",oldVal);
                       }
            },
            filters:{
                priceFormat:function(priceVal){
                    return priceVal.toFixed(2)+"元"
                }
            },
            methods:{
                doSave:function(){
                    this.prodList.push(this.prod);
                    console.log(this.prodList);
                    this.prod={id:0,name:'',price:0};
                },
                doRemove:function(index){
                        this.prodList.splice(index,1);
                    }
            }
            
        })
    </script>
</body>
</html>